<template>
    <div class="problem-detail">
        <el-dialog title="纠错描述详细" :visible.sync="detailMessage.isShow" size="tiny">
            <div class="detail-header">
                <p class="detail-line" v-html="filterFormula(problemDetail.question)" ></p>
                <p v-if="problemDetail.questionType == 11 || problemDetail.questionType == 12" v-for="(answer,index) in problemDetail.listAnswer" :key="index" v-html="optionLabelList(index)+'、' + filterFormula(answer.content)"></p>
                <p class="detail-line">
                    <span>
                        答案：
                        <span v-if="problemDetail.questionType == 2">{{problemDetail.listAnswer[0].iscorrect==='Y'?'正确':'错误'}}</span>
                        <span v-if="problemDetail.questionType == 11 || problemDetail.questionType == 12"  v-for="(answer,index) in problemDetail.listAnswer">
                            <span v-if="answer.iscorrect=='Y'">{{optionLabelList(index)+''}}</span>
                        </span>
                    </span>
                </p>
                <p class="detail-line">解析：</p>
                <p class="detail-content" v-html="filterFormula(analysis)" ></p>
                <p class="detail-line"><span>错误类型：{{problemDetail.errorType}}</span></p>
                <p class="detail-line">错误描述：</p>
                <p class="detail-content" v-html="filterFormula(problemDetail.content?problemDetail.content:'无错误描述')"></p>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { getProblemDetail, getProblemAnalysis} from 'api/modifyError.js';
    export default{
        props: {
            detailMessage: {
                default() {
                    return {
                        isShow: false,
                        problemID: ''
                    }
                }
            }
        },  
        data() {
            return {
                loading: false,
                problemDetail: [],
                analysis: '暂无解析'
            }
        },
        created() {
            this.getProblemDetail();
        },
        methods: {
            // 获取ABC标签
            optionLabelList(index) {
                return ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'][index];
            },
            // 匹配公式
            filterFormula(val) {
                if (!val) return '';
            // [LaTeXI]E=m{{c}^{2}}[/LaTeXI]
                return val.replace(/\[LaTeXI\](.*?)\[\/LaTeXI\]/ig, ($1, $2) => {
                    // console.log($2);
                    return '<img src="http://gs.xueleyun.com//cgi-bin/mathtex.cgi?'+ $2 +'"/>';
                });
            },
            // 获取题目详细信息
            getProblemDetail() {
                this.loading=true;
                // 获取题目
                getProblemDetail(this.detailMessage.problemID, this.detailMessage.subjectName).then(response => {
                    this.problemDetail=response.data.content;
                    // console.log(this.problemDetail);
                    if (this.problemDetail.errorType) {
                        this.problemDetail.errorType=this.problemDetail.errorType.replace('0', '题干错误');
                        this.problemDetail.errorType=this.problemDetail.errorType.replace('1', '答案错误');
                        this.problemDetail.errorType=this.problemDetail.errorType.replace('2', '解析错误');
                        this.problemDetail.errorType=this.problemDetail.errorType.replace('3', '其他错误');
                    }                 
                })
                // 获取解析
                getProblemAnalysis(this.detailMessage.subjectName, this.detailMessage.questionId).then(response => {
                    this.loading=false;
                    console.log(response.data.content);
                    if (response.data.content) {
                        this.analysis=response.data.content.content;
                        console.log(this.analysis);
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
.problem-detail{ 
    .detail-header{
        max-height:550px;
        width:100%;
        overflow-y: auto;
        .detail-line{
            margin:10px 0;
        }
        .detail-content{
            min-height:40px;
        }
    }
    

   
}

</style>
